<template>
<view class="" style="width: 100vw;height: 100vh">
		<view class="" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
		<image src="/static/index/collect_bg.jpg" mode="scaleToFill" class="bg"></image>
		<hx-navbar title="账单详情" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto">
		</hx-navbar>
		<view class="container">
			<view class="details_item" v-for="(item, index) in list" :key="index">
				<image src="/static/user/icon_jifen2.png" class="balance_img" mode="widthFix"></image>
				<view class="details_info">

					<view class="tixian_tiitle">
						{{item.memo}}
					</view>

					<view class="order_id color-o">
						{{item.ctime}}
					</view>
				</view>
				<view class="order_num" :class="{plusnum:item.money>0}">
					{{item.money>0?'+':''}}{{ item.money }}
					<view class="fsz24 color-o" style="font-weight: normal;">
						余额：{{ item.balance }}
					</view>
				</view>
			</view>
			<view class="none" v-if="list.length == 0">
				暂无记录
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// objectType: ['全部', '消费', '退款', '充值', '提现', '佣金', '平台调整'],
				objectType: ['全部', '消费', '充值', '提现', '平台调整', '卖出'],
				states: [0, 1, 3, 4, 7, 9], // 不同类型的状态
				index: 0, // 默认选中的类型	索引
				page: 1,
				limit: 10,
				list: [],
				loadStatus: 'more'
			}
		},
		onLoad(e) {
			if (e.status) {
				this.index = this.states.indexOf(parseInt(e.status));
			} else {
				this.balances() //修复多次加载问题
			}
		},
		onReachBottom() {
			if (this.loadStatus === 'more') {
				this.balances()
			}
		},
		methods: {
			// 切换类型
			changeState(e) {
				if (this.index !== e.target.value) {
					this.index = e.target.value;
					this.page = 1
					this.list = []
				}
			},
			// 获取余额明细
			balances() {
				let data = {
					type: this.states[this.index],
					page: this.page,
					limit: this.limit
				}

				this.loadStatus = 'loading'

				this.$api.getBalanceList(data, res => {
					if (res.status) {
						if (this.page >= res.total) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page++
						}
						this.list = [...this.list, ...res.data]
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			}
		},
		watch: {
			index() {
				this.balances();
			}
		}
	}
</script>

<style>
	.none {
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		padding-top: 40rpx;
	}

	.order_num {
		font-size: 28rpx;
		color: #fff;
		text-align: right;
	}

	.plusnum {
		color: #fff;
	}

	.order_id {
		padding-top: 6rpx;
		line-height: 30rpx;
		font-size: 22rpx;
		font-weight: 400;
		
	}

	.tixian_tiitle {
		width: 100%;
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
	}

	.details_info {
		flex: 1;
		padding-left: 20rpx;

	}

	.balance_img {
		width: 50rpx;
		height: 50rpx;
	}

	.details_item {
		width: 100%;
		border-bottom: 1rpx solid #d9d9d9;
		height: 164rpx;
		padding: 30rpx 22rpx;
		display: flex;
		align-items: center;

	}

	.container {
		width: 100%;
		padding: 20rpx;
	}

	
</style>
